<template>
	<div>
		<template v-if="src?.includes('pdf')">
			<PreviewPdf :src="src" :showFileList="showFileList" :baseStyle="baseStyle"></PreviewPdf>
		</template>
		<template v-else-if="src?.includes('.mp3')">
			<PreviewAudio :src="src"></PreviewAudio>
		</template>
		<template v-else-if="src?.includes('.mp4')">
			<el-button text type="primary" @click="videoVisible = !videoVisible">
				查看
				<el-icon>
					<icon-play theme="outline" size="24" />
				</el-icon>
			</el-button>
		</template>
		<template v-else-if="imgUrl">
			<el-image
				:style="baseStyle"
				:src="imgUrl"
				:zoom-rate="1.2"
				:max-scale="7"
				:min-scale="0.2"
				:preview-src-list="showPreviewSrcList ? [imgUrl] : []"
				:initial-index="4"
				:z-index="10000"
				fit="cover"
				:preview-teleported="true"
			>
				<template #error>
					<div class="image-slot tc" @click="handleDowload" >
						<img :src="defaultFile" alt="点击下载" />
							<el-tooltip class="box-item" effect="dark" :content="fileName" placement="top-start">
								<span class="f12">{{ fileName }}</span>
							</el-tooltip>
					</div>
				</template>
			</el-image>
		</template>

		<el-dialog v-model="videoVisible" append-to-body width="65%" title="查看">
			<videoPlay :src="imgUrl" v-if="videoVisible" style="width: 100%; max-height: 500px"></videoPlay>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import defaultFile from '@/assets/icons/defaultFile.png'
import PreviewPdf from './PreviewPdf/index.vue'
import PreviewAudio from './PreviewAudio/index.vue'
import videoPlay from './videoPlay/index.vue'
import { DowloadPreviewImage } from '@/utils/util'
import FileSaver from 'file-saver'

export default defineComponent({
	components: {
		PreviewPdf,
		PreviewAudio,
		videoPlay,
	},
	props: {
		src: {
			type: String,
		},
		showPreviewSrcList: {
			type: Boolean,
			default: true,
		},
		showFileList: {
			type: Boolean,
		},
		baseStyle: {
			type: Object,
			default: () => ({
				width: '100%',
				height: '100%',
			}),
		},
	},
	setup(props, { emit }) {
		const videoVisible = ref(false)
		const imgUrl = ref('')
    const fileName: any = decodeURIComponent(props.src).split('/').slice(-1).toString()
		const getPreviewImage = async () => {
			if (props.src?.includes('ningxiang')) {
				const previewUrl = (await DowloadPreviewImage(props.src)) as string
				imgUrl.value = previewUrl
			} else {
				imgUrl.value = props.src
			}
		}
		const handleDowload = () => {
			FileSaver.saveAs(imgUrl.value, fileName)
		}

		watch(
			() => props.src,
			() => {
				getPreviewImage()
			},
			{
				immediate: true,
			}
		)
		return {
			videoVisible,
			imgUrl,
			fileName,
			defaultFile,
			handleDowload,
		}
	},
})
</script>

<style scoped lang="scss">
.preview-img-box {
	width: 128px;
	height: 128px;
	.el-image {
		img {
			width: 100%;
			height: 100%;
		}
	}
}
.image-slot {
  position: relative;
  z-index: 0;
  padding: 8px;
  border-radius: 4px;
  background-color:#efefef;
  >.f12 {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
}
</style>
